<template>
  <!-- 漫游 -->
  <div class="roaming-box">
    <!-- 	<div class="begin-btn" v-show="!_enable">
			<button @click="hBegin(true)">开始漫游</button>
		</div> -->
    <div class="rb-content" v-show="_enable">
      <div class="rb-set">
        <label>飞行速度</label>
        <p>
          {{ _speed }}
          <em style="font-size: 16px; color: #5a7eba">m/s</em>
        </p>
      </div>

      <div class="cbtns">
        <!-- 减速 -->
        <button @click="hSpeed(-0.2)"></button>

        <!-- 加速 -->
        <button @click="hSpeed(0.2)"></button>

        <!-- 暂停/继续 -->
        <button @click="hPause()" :class="{ pause: _pause }"></button>

        <!-- 重新开始 -->
        <button @click="hRestart()"></button>

        <!-- 结束 -->
        <button @click="hBegin(false)"></button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, watch, ref, onUnmounted, onMounted, nextTick, toRefs } from 'vue'
import { useStore } from 'vuex'

const _speed = ref(1)
const _pause = ref(false)

var _k = {
  escape: 'escape',
  space: 'space'
}
const { _enable, pgShow, scene3d } = toRefs(useStore().state)

const hKeyDown = (e) => {
  var _kdown = e.key.toLowerCase() //"w" 	//e.code: "KeyW"
  switch (_kdown) {
    case _k.escape:
      hBegin(false)
      break
    default:
      if (e.code.toLowerCase() == _k.space) {
      }
      break
  }
  console.log('key ', e)
}

const hRestart = () => {
  if (_enable.value) {
    hBegin(false)
  }
  hBegin(true)
}

//开启关闭
const hBegin = (v) => {
  if (typeof v == 'undefined') {
    _enable.value = !_enable.value
  } else {
    _enable.value = v
  }
}

//暂停继续
const hPause = () => {
  _pause.value = !_pause.value
}

//速度
const hSpeed = (v) => {
  var sv = _speed.value * 1
  var v = (sv + sv * v).toFixed(2)
  if (v <= 1) {
    v = 1
  }
  _speed.value = v
}

watch(_enable, (v) => {
  document.removeEventListener('keydown', hKeyDown)
  if (v) {
    document.addEventListener('keydown', hKeyDown, false)
  }
  console.log('飞行----', v)
  window.s3d.SetSceneFly(v)
})

watch(_speed, (v) => {
  console.log('飞行速度：', v)

  window.s3d.SetSceneFlySpeed(v)
})

watch(_pause, (v) => {
  console.log('暂停继续：', v)

  window.s3d.SetSceneFlyPaush(v)
})

const hCheck = () => {}

const props = defineProps({
  begin: {
    type: Boolean
  }
})

defineExpose({
  hBegin
})

onMounted(() => {
  nextTick(() => {
    hCheck()
  })
})

onUnmounted(() => {})
</script>
<style scoped>
.roaming-box {
  position: absolute;
  pointer-events: all;
  width: 0;
  bottom: 150px;
  right: -35px;
  letter-spacing: 2px;
}

.rb-content {
  color: #eee;
  background-image: url(/imgs/menu/flyBg.png);
  transform: translate(-50%, 0);
  width: 310px;
  height: 78px;
  padding: 5px 20px;
  display: flex;
  align-items: center;
}

.rb-set {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  /* margin: 10px 0; */
}

.rb-set > * {
  display: inline-flex;
  padding: 0 3px;
  font-family: FZCuYuan-M03S;
  font-weight: 400;
  font-size: 14px;
  color: #5a7eba;
  width: 40px;
}

.rb-set input:focus {
  border: none;
}

.rb-set p {
  width: 100px;
  text-align: center;
  line-height: 20px;
  font-family: FZCuYuan-M03S;
  font-weight: 400;
  font-size: 20px;
  color: #ff992c;
  display: flex;
  justify-content: center;
}

.cbtns {
}

.cbtns :nth-child(1) {
  background-image: url(/imgs/menu/后退.png);
  background-size: auto 100%;
  width: 28px;
  height: 25px;
}

.cbtns :nth-child(2) {
  background-image: url(/imgs/menu/前进.png);
  background-size: auto 100%;
  width: 28px;
  height: 25px;
}

.cbtns :nth-child(3).pause {
  background-image: url(/imgs/menu/播放.png);
  background-size: auto 100%;
  width: 24px;
  height: 25px;
}

.cbtns :nth-child(3) {
  background-image: url(/imgs/menu/暂停.png);
  background-size: auto 100%;

  width: 20px;
  height: 27px;
}

.cbtns :nth-child(4) {
  background-image: url(/imgs/menu/刷新.png);
  background-size: auto 100%;
  width: 25px;
  height: 27px;
}

.cbtns :nth-child(5) {
  background-image: url(/imgs/menu/关闭.png);
  background-size: auto 100%;
  width: 24px;
  height: 25px;
}
</style>
